<template>
    <div class="about">
        关于
        <el-select v-model="value" placeholder="请选择" @change="selectChange">
            <el-option v-for="item in goods" :key="item.value" :label="item.label" :value="item">
            </el-option>
        </el-select>
        <div>
            <div v-for="item in goodsPrice" :key="item.value">
                <span>{{item.label}}</span>
                <el-input style="width: 120px" v-model="item.price" />
            </div>
        </div>
        <!-- 事件总线的使用 -->
        <EventBusBrother />
        <EventBusSister />
    </div>
</template>
<script>

import EventBusBrother from '../components/EventBusBrother.vue'
import EventBusSister from '../components/EventBusSister.vue'
export default {
    name: 'About',
    components: {
        EventBusBrother,
        EventBusSister,
    },
    data() {
        return {
            goods: [
                {value: '选项1',label: '黄金糕'},
                {value: '选项2',label: '双皮奶'},
                {value: '选项3',label: '蚵仔煎'},
                {value: '选项4',label: '龙须面'},
                {value: '选项5',label: '北京烤'}
            ],
            value: null,
            // 带价商品列表
            goodsPrice: [{value: '选项1',label: '黄金糕',price: 0}]
        }
    },
    methods: {
        /** vue 能够侦测到·数组· ·响应式·更新的七种方法
         *  push, pop, shift, unshift, splice, sort, reverse
         * 能够侦测到·object··响应式·更新的两种方法
         * vue.$set(object, key, value)：设置属性值，vue.$delete：删除属性
         */
        selectChange(item){
            this.$set(item,'price', 0);
            this.goodsPrice.push(item);
            console.log( 'item', item, this.goodsPrice );
        },
    },
    /* 生命周期 */
    beforeCreate() {
        /** 第一生命周期函数
         * 实例刚在内存中被创建出来，此时，还没有初始化好data 和 methods 属性
         */
        console.log('beforCreate', this);
    },
    created() {
        /** 第二个生命周期函数
         * 实例已经在内存中创建OK，此时data 和 methods 已经创建OK，此时还没有开始 编译模板
         * 如果要调用methods中的方法，或者操作 data 中的数据，最早只能在 created 中操作
         */
        console.log('created', this);
    },
    beforeMount() {
        /** 第三个生命周期函数
         * 此时已经完成了模板在内存中的编译，但是还没有挂载到页面中
         * 在beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
         */
    },
    mounted() {
        /** 第四个生命周期函数
         * 此时，已经将编译好的模板，挂载到了页面指定的容器中显示，用户可以看到渲染好的页面
         * mounted 是实例创建期间的最后一个生命周期函数，当执行完mounted 就表示，实例已经完全创建好了
         */
    },
    /* 运行中的事件 */
    beforeUpdate() {
        /** 
         * 状态更新之前执行此函数，此时data 中的状态值是最新的，但是界面上显示的数据还是旧的，
         *  因为此时还没有有开始重新渲染 DOM 节点 
         * 这时候，页面尚未和最新的数据保持同步
         */
    },
    updated() {
        /** 实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新界面已经被渲染好了。
         * 页面和data数据已经保持同步了，都是最新的。 
         */
    },
    /* 销毁期间的生命周期函数 */
    beforeDestroy() {
        /**
         * 实例销毁之前调用。在这一步，实例仍然完全可用
         */
    },
    destroyed() {
        /**
         * 实例销毁后调用。调用后，Vue 实例指示的所有东西都会接绑定，所有的事件监听器会被移除，
         * 所有的子实例也会被销毁
         */
    },
}
</script>